<template>
  <div class="c-table">
    <el-row>
      <el-col :span="12">
        <el-input :placeholder="$t('report.inputForName')"
                  size="mini"
                  v-model="input">
          <i
            class="el-input__icon el-icon-search"
            slot="suffix"
            @click="handleIconClick">
          </i>
        </el-input>
      </el-col>
    </el-row>

    <div class="table-wapper artificial-table-wapper">
      <div class="tool">
        <div class="add-wapper">
          <el-button class="primary_btn add_btn" type="text" @click.stop="changeAddTemp('add')" icon="el-icon-plus">{{$t('public.add')}}</el-button>
        </div>

        <div class="page">
          <pagination :small="true" :currentPage="trunPage" :count="count" @turnPage="trunPages" :totalPage="Math.ceil(count/10)">
          </pagination>
        </div>
      </div>
      <el-table highlight-current-row stripe :data="tableData" style="width: 100%" size="mini">
        <el-table-column :label="$t('configLazyLoad.qualityCheck.name')" prop="name">
        </el-table-column>
        <el-table-column :label="$t('configLazyLoad.qualityCheck.qualityCycle')" prop="cycleName">
        </el-table-column>
        <el-table-column :label="$t('public.state')">
          <template scope="scope">
              <span  :class="{'stop-text': !scope.row.enable}">{{ scope.row.enable ? $t('sms.reuse'):$t('sms.stop') }}</span>
          </template>
        </el-table-column>
          <el-table-column :label="$t('public.operate')"
          width="94">
            <template scope="scope">
              <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">
                {{$t('public.edit')}}</el-button>
              <el-button size="small" type="text" :class="{'stop': scope.row.enable}" @click="handleStop(scope.$index, scope.row)">{{scope.row.enable ? $t('sms.stop'): $t('sms.reuse')}}</el-button>
            </template>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'ArtificialTable',
    data () {
      return {
        trunPage: 1,
        input: ''
      }
    },
    props: {
      count: Number,
      tableData: Array
    },
    methods: {
      handleIconClick (page = 1) {
        console.log('handleIconClick')
        this.$emit('search', {
          page: page,
          pageSize: 10,
          name: this.input
        })
      },
      changeAddTemp (arg) {
        this.$emit('clickEdit', arg)
      },
      handleStop (index, row) {
        this.$emit('stop', {
          page: this.trunPage,
          row
        })
      },
      trunPages (page) {
        this.trunPage = page
        this.handleIconClick(page)
      },
      handleEdit (index, row) {
        this.$emit('edit', row)
      }
    },
    components: {
      Pagination
    }
  }
</script>

<style lang="stylus" scoped>
@import "../../../../../../assets/common.styl"
.tool
  display flex
  justify-content space-between
  border 1px solid #e7e7eb
  border-bottom 0
.add-wapper
  line-height 28px
  span
    margin-left 8px
.table-wapper
  margin-top 20px
.add-form__wapper
  margin-top 20px
.el-icon-plus
  color $c-main
.el-table
  .cell >.stop
    color $c-pink
.stop-text
  color $c-pink
</style>
